<template>
  <div id="box">
    <div class="header">
      <Form ref="search" :model="search" inline  :label-width="80">
        <FormItem prop="id" label="用户ID:" style="width: 260px">
          <Input v-model="search.id" placeholder="输入用户ID" style="width: 200px"/>
        </FormItem>
        <FormItem prop="game" label="活动类型:" style="width: 250px">
          <Select v-model="search.game" style="width: 150px" placeholder="不限">
            <Option  v-for="(item,index) in gameList" :key="item.index" :value="item.value">{{item.label}}</Option>
          </Select>
        </FormItem>
       <!-- <FormItem prop="get" label="领取结果:" style="width: 250px">
          <Select v-model="search.get" style="width: 150px" placeholder="不限">
            <Option  v-for="(item,index) in getList" :key="item.index" :value="item.value">{{item.label}}</Option>
          </Select>
        </FormItem>-->
        <FormItem prop="time" label="签到时间:" style="width: 250px">
          <DatePicker  v-model="search.time" type="daterange" placement="bottom-end"  :clearable="false" placeholder="选择时间" style="width: 200px" @on-change="changeDate" ></DatePicker>
        </FormItem>
        <FormItem>
          <Button type="primary"  @click="searching('search')" style="margin-right: 25px;">查询</Button>
          <Button type="default" @click="clear('search')">重置</Button>
        </FormItem>
      </Form>
    </div>
    <div class="center">
      <Table stripe :columns="ExColumns" :data="ExData" :loading="loading"></Table>
    </div>
    <div class="footer">
      <Page :total="total" :page-size="pageSize" :current="step" style="margin-top: 30px" show-total @on-change="getData"/>
    </div>
  </div>
</template>

<script>
  export default {
    name: "exchange",
    data(){
      return{
        search:{
          id:'',
          game:'',
          time:'',
        },
        gameList:[
          {
            label:'签到',
            value:0,
          },
          {
            label:'累计消费',
            value:1,
          }
        ],
        getList:[
          {
            label:'成功',
            value:1,
          },
          {
            label:'失败',
            value:0,
          }
        ],
        ExColumns:[
          {
            title: '数据ID',
            align:'center',
            key: 'id'
          },
          {
            title: '用户ID',
            align:'center',
            key: 'userId'
          },
          {
            title: '交易号',
            align:'center',
            key: 'tradeNo'
          },
          {
            title: '活动类型',
            align:'center',
            key: 'exchangeType',
            render:(h, params) => {
              let txt="";
              if(params.row.exchangeType==0){
                txt="签到"
              }else if(params.row.exchangeType==1){
                txt="累计消费"
              }
              return h('div',txt);
            }
          },
          {
            title: '用户身份',
            align:'center',
            key: 'exchangeRole',
            render:(h, params) => {
              let txt="";
              if(params.row.exchangeRole==0){
                txt="集享"
              }else{
                txt="尊享"
              }
              return h('div',txt);
            }
          },
          {
            title: '领取结果',
            align:'center',
            key: 'exchangeResult',
            render:(h, params) => {
              let txt="";
              if(params.row.exchangeResult==1){
                txt="成功"
              }else if(params.row.exchangeResult==0){
                txt="失败"
              }
              return h('div',txt);
            }
          },
          {
            title: '使用情况',
            align:'center',
            key: 'prizeUsed',
            render:(h, params) => {
              let txt="";
              if(params.row.prizeUsed==0){
                txt="未使用"
              }else if(params.row.prizeUsed==1){
                txt="已使用"
              }
              return h('div',txt);
            }
          },
          {
            title: '领取奖品',
            align:'center',
            key: 'prizeName',
          },
          {
            title: '领取时间',
            align:'center',
            key: 'createTime'
          },
        ],
        ExData:[],
        total:0,
        pageSize:10,
        step:1,
        loading:true,
      }
    },
    methods:{
      //查询
      searching(name){
        this.getData();
      },
      //重置
      clear(name){
        this.$refs[name].resetFields();
        this.getData();
      },

      //获取时间
      changeDate() {
        if(this.search.time[0] != "" && this.search.time[1]!= ""){
          this.search.start= this.search.time[0].getTime();
          this.search.end = this.search.time[1].getTime();
        }else{
          this.search.start ="";
          this.search.end ="";
        }
      },

      //获取分页数据
      getData(step) {
        this.step = step;
        this.$http.get('/exchangeRecord/list', {
          params: {
            userId: this.search.id,
            gameType:this.search.game,
            startTime: this.search.start,
            endTime:  this.search.end,
            page: this.step,
            size: this.pageSize,
          }
        })
          .then(res => {
            console.log(res);
            if (res.data.status === 200) {
              this.ExData = res.data.data.list;
              this.total = res.data.data.total;
              this.loading = false;
            } else {
              this.$Message.error(res.data.message);
              this.loading = false;
            }
          })
      },


    },
    mounted(){
      this.getData();

    }
  }
</script>

<style scoped>

</style>
